<template>
  <div class="reco">
    <div class="rec-title">
      <h2>参会单位推荐</h2>
      <h5>实现梦想的第一步</h5>
    </div>
    <div class="rec-show">
      <nuxt-link
        v-for="v in adList"
        :key="v.id"
        :style="{
          background: 'url(' + v.logo + ') center center no-repeat',
          backgroundSize: 'auto 80%',
          border: '1px solid #ebebeb',
        }"
        class="rec-item"
        :to="{path: '/company/detail', query: {id: v.id}}"
      >
      </nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
  props: ['company'],
  data () {
    return {
      adList: [],
    }
  },
  watch: {
    company (val) {
      this.adList = val;
    }
  },
  created () {
    this.adList = this.company;
  },
  mounted () {
  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
.reco {
  position: relative;
  width: $base-width;
  margin: 0 auto;
  .rec-title {
    text-align: center;
    padding: 40px 0;
    h2 {
      font-size: 36px;
      color: #333;
      margin-bottom: 5px;
    }
    h5 {
      font-size: 18px;
      color: #666;
    }
  }
  .rec-show {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .rec-item {
      height: 120px;
      width: 294px;
      margin: 0 6px 6px 0;
      background: #ebebeb;
      &:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
}
</style>
